<template>
	<view>
		<view class="content">
			<view class="content-img-box">
				<swiper class="swiper" :indicator-dots="indicatorDots" :circular="true" :autoplay="autoplay" :interval="interval" :duration="duration">
					<swiper-item v-for="(item,index) in data.imgList">
						<image class="img" :src="item" mode="" @click="scaleImg(item,index)"></image>
					</swiper-item>
				</swiper>
			</view>
			<view class="content-des">
				<view class="">司机：{{data.driver}}</view>
				<view class="">手机号：{{data.phone}}</view>
				<view class="">车牌号：{{data.myid}}</view>
				<view class="">卸泥地点：{{data.destination}}</view>
				<view class="">过磅时间：{{data.piDatetime}}</view>
				<view class="">出厂时间：{{data.starttime}}</view>
				<view class="">卸泥时间：{{data.endtime}}</view>
				<view class="">毛重：{{data.maoNum}}{{data.punit}}</view>
				<view class="">皮重：{{data.piNum}}{{data.punit}}</view>
				<view class="" style="font-weight: bold;">净重：{{data.niNum}}{{data.punit}}</view>
			</view>
		</view>
		<!-- #ifdef APP-PLUS -->
		<view class="map-box" v-if="mapVisible">
			<map class="map" :latitude="latitude" :longitude="longitude" :markers="covers" :polyline="polyline">
			</map>
		</view>
		<!-- #endif -->
	</view>
</template>


<script>
	import {formatImgList} from '../../../../common/custom_util.js'
	import _custom from '../../../../common/_custom.js'
	import coverStart from '@/static/theme/default/location.png';
	import coverEnd from '@/static/theme/default/destination.png';
	
	export default {
		data() {
			return {
				latitude: 39.909,
				longitude: 116.39742,
				covers: [],
				polyline: [
					{
						points: [],
						color: '#5FBD81',
						width: 6
					}
				],
				data: {},
				indicatorDots: true,
				autoplay: true,
				interval: 5000,
				duration: 1000,
				mapVisible: false
			}
		},
		onLoad(option) {
			let that = this;
			this.data = JSON.parse(option.data)
			let maoImages = this.data.maoImages ? formatImgList(this.data.maoImages) : []
			let piImages = this.data.piImages ? formatImgList(this.data.piImages) : []
			let unloadImages = this.data.unloadImages ? formatImgList(this.data.unloadImages) : []
			let temp = [];
			maoImages.forEach(item => {
				temp.push(item)
			})
			piImages.forEach(item => {
				temp.push(item)
			})
			unloadImages.forEach(item => {
				temp.push(item)
			})
			this.data.imgList = temp;
			let lat = 'bLat';
			let lng = 'bLng';
			this.getGpsList().then(res => {
				if(res.length) {
					that.mapVisible = true;
					that.latitude = res[0][lat];
					that.longitude = res[0][lng];
					that.covers.push({
						latitude: res[0][lat],
						longitude: res[0][lng],
						iconPath: coverStart
					},{
						latitude: res[res.length - 1][lat],
						longitude: res[res.length - 1][lng],
						iconPath: coverEnd
					})
					that.polyline[0].points = res.map(item => {
						return {
							latitude: item[lat],
							longitude: item[lng],
						}
					})
				} else {
					if(!that.data.GpsDeviceId) return
					new Promise((resolve) => {
						uni.request({
							url: "https://apis.bfgps.net.cn/wxapi/api",
							data: {
								busiCode: "memberLogin",
								body: {
									"username": "18351865641",
									"password": "125809",
									"uuid": "",
									"loginType": ""
								}
							},
							method: "POST",
							dataType: 'json',
							success(res) {
								if(res.data.code == 100){
									resolve(res.data.data);
								}
							}
						})
					}).then(res => {
						uni.request({
							url: "https://apis.bfgps.net.cn/wxapi/api",
							data: {
								busiCode: "locationReplay",
								x_token: res.x_token,
								body: {
									"device_id": that.data.GpsDeviceId,
									"starttime": that.data.starttime,
									"endtime": that.data.endtime,
									"locationType": "GPS",
									"pageNum": 1,
									"pageSize": 5000,
									"mileage": 0
								}
							},
							method: "POST",
							dataType: 'json',
							success(res) {
								if(res.data.code == 100){
									let points = res.data.data.list;
									if(!points.length) return
									that.mapVisible = true;
									that.latitude = points[0][lat];
									that.longitude = points[0][lng];
									that.covers.push({
										latitude: points[0][lat],
										longitude: points[0][lng],
										iconPath: coverStart
									},{
										latitude: res[res.length - 1][lat],
										longitude: res[res.length - 1][lng],
										iconPath: coverEnd
									})
									that.polyline[0].points = points.map(item => {
										return {
											latitude: item[lat],
											longitude: item[lng],
										}
									})
								}
							}
						})
					})
				}
			})
		},
		methods: {
			scaleImg(v,i) {
				uni.previewImage({
					current: i,
					urls: this.data.imgList,
					indicator: 'number'
				})
			},
			getGpsList() {
				return new Promise(resolve => {
					_custom.getDataJava({
						apiname: 'getWuNiGPSList',
						apiparam: {
							//临时参数
							// obscode:'WUDI',
							pbz: this.data.pbz,
						}
					}).then(res => {
						resolve(res);
					})
				})
				
			}
		}
	}
</script>

<style>
	.map {
		width: 750rpx;
		height: 50vh;
	}
	
	.content {
		padding: 20rpx;
	}
	
	.swiper {
		height: 400rpx;
	}
	
	.img {
		width: 100%;
		height: 100%;
	}
	
	.content-des {
		padding: 20rpx;
		background-color: #fff;
		border-radius: 10rpx;
		box-shadow: 0 0 10rpx 2rpx rgba(0, 0, 0, .1);
		font-size: 25rpx;
		margin-top: 20rpx;
		margin-bottom: 30rpx;
	}
</style>
